<template>
  <!-- 搜索 -->
  <Category></Category>
  <!-- 内容 -->
  <el-card style="margin: 10px 0px">
    <el-button type="primary" icon="Plus">添加平台属性</el-button>
    <el-table style="margin: 10px 0px" border :data="attrData">
      <el-table-column
        width="80px"
        label="序号"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column
        width="120px"
        label="属性名称"
        prop="attrName"
      ></el-table-column>
      <el-table-column label="属性值名称">
        <template #="{ row, index }">
          <el-tag
            style="margin: 0px 5px"
            type="primary"
            v-for="(item, index) in row.attrValueList"
            :key="item.attrId"
          >
            {{ item.valueName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="150px" label="操作">
        <el-button size="small" type="primary" icon="Edit"></el-button>
        <el-button size="small" type="danger" icon="Delete"></el-button>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import useCategoryStore from '@/store/modules/category'
import AttrApi from '@/api/product/attr'
import { AttrResponseData } from '@/api/product/attr/type'

let categoryStore = useCategoryStore()

let attrData = ref<Attr[]>([])

//监听三级分类是否变化
watch(
  () => categoryStore.c3Id,
  () => {
    attrData.value = []
    if (categoryStore.c3Id) {
      getAttr()
    }
  },
)

let getAttr = async () => {
  let result = await AttrApi.reqAttr(
    categoryStore.c1Id,
    categoryStore.c2Id,
    categoryStore.c3Id,
  )
  // Object.assign(attrData, result.data)
  // console.log('attr', result)
  attrData.value = result.data
}
</script>
<style lang="scss" scoped></style>
